<template>
  <div class="member-card">
    <div class="title">
      <span class="title-box">
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new-blind-box/large_frame_left.png" alt="" class="title-left">
        <span class="title-name">会员佣金</span>
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new-blind-box/large_frame_right.png" alt="" class="title_right">
      </span>
    </div>
    <div class="top-name">
      <span class="left">头像</span>
      <span class="middle">会员</span>
      <span class="right right-center" title="佣金金额">佣金金额</span>
    </div>
    <div class="tableoOut" ref="tableoOut">
      <div class="tableBox" ref="tableBox" :style="{ height: tableHei }">
        <div class="tableInner" ref="tableInner">
          <div class="box" v-for="(item,index) in dataList" :key="index">
            <div class="img-box">
              <img :src="item.avatar_image" alt="">
            </div>
            <div class="middle">{{ item.nickname }}</div>
            <div class="right right-value">{{item.amount}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    memberData: {
      type: null,
      default: () => []
    },
    ininValue: {
      type: null,
      default: true
    }
  },
  watch: {
    memberData(newVal, oldVal) {
      if(!this.ininValue) {
        clearTimeout(this.time_out);
        this.time = 10;
        this.$nextTick(() => {
          clearInterval(this.setTime);
          clearInterval(this.time_member);
          this.initMemberData();
        })
      }
    }
  },
  data() {
    return {
      dataList: [],
      setTime: null,

      tableHei: "auto",
      timer: null,
      stepTime: null, // 改为全局定时器
      time: 10
    };
  },
  mounted() {
    this.initMemberData();
  },
  methods: {
    initMemberData() {
      let saveAllData = JSON.parse(JSON.stringify(this.memberData));
      this.dataList = JSON.parse(JSON.stringify(saveAllData));
      this.time_out = setTimeout(() => {
        if(saveAllData.length <= 10) {
          return
        }
        this.setTime = setInterval(() => {
          if(this.time >= saveAllData.length - 1) {
            this.time = 0;
          }
          console.log(JSON.parse(JSON.stringify(this.memberData))[this.time],22222,this.time);
          this.showMarquee([JSON.parse(JSON.stringify(this.memberData))[this.time]], 500);
          this.time = this.time + 1;
        }, 8000);
      },2000)
    },
    getTable(val) {
      this.scrolls(val);
    },
    stepScroll() {
      const tableBox = this.$refs.tableBox;
      // 改为全局定时器，且在调用前先进行清空
      clearInterval(this.stepTime);
      this.stepTime = setInterval(() => {
        tableBox.scrollTop -= 1;
      }, 1000 / 60);
    },
    scrolls(val) {
      const that = this;
      const tableBox = this.$refs.tableBox;
      let temp = 1;
      clearInterval(this.timer);
      this.timer = setInterval(function() {
        // 修改定时器结束判断条件
        if(temp >= 2) {
          clearInterval(this.timer);
          return
        }
        temp++
        tableBox.scrollTop = 40;
        that.stepScroll();
      }, 1000);
    },
    showMarquee(val, time) {
      // clearTimeout(this.time_out)
      this.time_member = setTimeout(() => {
        this.dataList.unshift(...val);
      },1000)
      this.getTable(val);
    }
  }
};
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
@media screen and (max-height: 860px) {
  .box {
    height: 3.5vh !important;
  }
}

@media screen and (min-height: 970px) {
  .box {
    height: 4.05vh !important;
  }
}

@media screen and (min-height: 990px) {
  .box {
    height: 4.3vh !important;
  }
}

.tableoOut {
  height: 96%;
  overflow: hidden;
  display: flex;
  align-items: center;
  // justify-content: center;
  flex-direction: column;
}

.tableBox {
  width: 100%;
  // height: 100% !important;
  overflow: hidden;
}

.tableInner {
  height: auto;
  // height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  margin-top: 1.5%;
}

.box {
  width: 100%;
  height: 4.1vh;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  font-size: 0.9rem;
}

.left {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  font-size: 0.9rem;
  text-align: left;
}

.middle {
  // margin: 0 10px;
  flex: 1.5;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-align: left;
  font-size: 0.9rem;
  word-wrap: break-word;
}

.right {
  flex: 1.5;
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  text-overflow: ellipsis;
  word-break: break-all;
  text-align: center;
  font-size: 0.9rem;
}

.right-value {
  color: #ead787;
}

.img-box {
  flex: 1;
  text-align: left;

  img {
    width: 2.8vh;
    border-radius: 50%;
  }
}

.member-card {
  color: white;
  padding: 2% 1% 0.5% 0;
  position: relative;
  border-radius: 8px;
  background: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new-blind-box/large_outer_frame.png') no-repeat;
  background-size: 100% 100%;

  .title {
    color: white;
    font-size: 0.6rem;
    position: absolute;
    top: -1%;
    width: 100%;
    right: 0;

    .title-box {
      background: url('https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/new-blind-box/large_frame.png') no-repeat;
      background-size: 100% 100%;
      padding: 2.5% 8%;
      position: relative;

      .title-left {
        position: absolute;
        left: 5%;
        top: 20%;
        height: 1.8vh;
        width: 0.8vw;
      }

      .title_right {
        position: absolute;
        right: 5%;
        top: 20%;
        height: 1.8vh;
        width: 0.8vw;
      }

      .title-name {
        margin: 0 1%;
        color: #02d9fd;
        font-size: 1rem;
        vertical-align: text-top;
      }
    }
  }

  .top-name {
    display: flex;
    text-align: left;
    align-items: center;
    color: #22dbfa;
    font-size: 1rem;

    .right-center {
      flex: 1.5;
      text-align: center;
    }
  }

  .img-box {
    flex: 1;
    // text-align: center;
    margin-left: 6%;

    img {
      width: 2.8vh;
      border-radius: 50%;
    }
  }

  .left {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
    margin-left: 6%;
    // text-align: center;
  }

  .middle-box {
    display: flex;
    align-items: center;
    flex: 2;
  }

  // .middle {
  //   // margin: 0 10px;
  //   flex: 1.6;
  //   overflow: hidden;
  //   text-overflow: ellipsis;
  //   display: -webkit-box;
  //   -webkit-box-orient: vertical;
  //   -webkit-line-clamp: 1;
  // }

  // .right-box {
  //   display: flex;
  //   align-items: center;
  //   flex: 1.2;

  //   .right {
  //     color: #eddb8d;
  //   }
  // }

  // .right {
  //   display: -webkit-box;
  //   overflow: hidden;
  //   -webkit-box-orient: vertical;
  //   -webkit-line-clamp: 1;
  //   text-overflow: ellipsis;
  //   word-break: break-all;
  //   flex: 1.2;
  // }

  .detail-pane {
    height: 100%;
    padding: 5px 0 15px 0;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    font-size: 0.9rem;

    .detail {
      display: flex;
      // margin: 15px 0 0 0;
      text-align: left;
    }
  }
}
</style>
